Microblogging.SelectButton = Ext.extend(Ext.Button, {
			ui : 'select',
			valueField : 'value',
			displayField : 'text',
			displayBaseCls:'x-select-button-text',
			displayCls:'',
			listIconBaseCls:'x-select-button-icon',
			listIconCls:'',
			useListIcon:true,
			iconField : 'icon',
			// @cfg {Number} tabIndex @hide
			tabIndex : -1,
			// @cfg {Boolean} useMask @hide
			useMask : true,
			monitorOrientation : true,
			// @private
			initComponent : function() {
				var options = this.options
				fields = [this.valueField, this.displayField],
				listItemTpl = ['<span class="' + this.displayCls + ' ' + this.displayBaseCls +'">{' + this.displayField + '}</span>'];
				if(this.useListIcon){
					fields.push(this.iconField);
					listItemTpl = ['<img src="" class="{'+this.iconField+'} ' + this.listIconCls + ' '+this.listIconBaseCls+'"/>'].concat(listItemTpl);
				}
				if (this.store) {
					this.store = Ext.StoreMgr.lookup(this.store);
				} else {
					this.store = new Ext.data.Store({
								fields : fields
							});
					if (options && Ext.isArray(options) && options.length > 0) {
						this.setOptions(this.options);
					}
				}
				Ext.apply(this,{
					callHandler : function() {
				        if (this.disabled) {
							return;
						}
						this.showComponent();
			   		},
			   		setHandler : null,
			   		listItemTpl:listItemTpl
				});
				Microblogging.SelectButton.superclass.initComponent.call(this);
				this.addEvents('change');
			},

			// @private
			getListPanel : function() {
				if (!this.listPanel) {
					this.listPanel = new Ext.Panel({
								floating : true,
								stopMaskTapEvent : false,
								hideOnMaskTap : true,
								cls : 'x-select-overlay',
								scroll : 'vertical',
								items : {
									xtype : 'list',
									store : this.store,
									itemId : 'list',
									scroll : false,
									itemTpl : this.listItemTpl,
									blockRefresh :true,
									listeners : {
										select : this.onListSelect,
										scope : this
									}
								}
							});
				}

				return this.listPanel;
			},
			// @private
			onOrientationChange : function() {
				if (this.isActive && !Ext.is.Phone) {
					this.listPanel.showBy(this.el, false, false);
				}
			},

			// @private
			showComponent : function() {
				this.getListPanel().showBy(this.el, 'fade', false);
				this.isActive = true;
			},

			// @private
			onListSelect : function(selModel, selected) {
				if (selected) {
					this.fireEvent('change', this, selected, selModel);
					Ext.defer(function(){
						selModel.deselect(selected);
					},300);
				}
				this.hideComponent();
			},
			hideComponent:function(){
				this.listPanel.hide({
						type : 'fade',
						out : true,
						scope : this
					});
				this.isActive = false;
			},
			setOptions : function(options, append) {
				if (!options) {
					this.store.clearData();
				} else {
					this.store.loadData(options, append);
				}
			},
			destroy : function() {
				Microblogging.SelectButton.superclass.destroy.apply(this, arguments);
				Ext.destroy(this.listPanel, this.picker);
			}
		});

Ext.reg('selectbutton', Microblogging.SelectButton);